<template>
	<view class="box">
		<uni-search-bar @confirm="search" v-model="searchValue" @cancel="searchValue = null;getLiteratureData()"
			@clear="searchValue = null;getLiteratureData()">
		</uni-search-bar>
		<view class="swiper_box">
			<swiper :autoplay="true" :circular="true" @change="(e)=>currentIndex = e.detail.current">
				<swiper-item v-for="(item,index) in articleData" :key="item.id">
					<view class="swiper-inner" @click="detailClick(item.id)">
						<!-- item.cover.path -->
						<image
							src="https://img2.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
						</image>
						<view>{{item.name}}</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="swiper-indicate">
				<view :class="currentIndex === index ? 'active':''" v-for="(item,index) in articleData"> </view>
			</view>
		</view>
		<view class="literature_inner">
			<view>大家爱看</view>
			<LiteratureList :literatureData="literatureData"></LiteratureList>
			<u-empty v-if="literatureData.length<=0" mode="list" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		recommendArticle,
		recommendLiterature
	} from '../../api/api';
	import {
		uniNavigateTo
	} from "@/util/index.js";
	import LiteratureList from "../../components/LiteratureList.vue"
	export default {
		components: {
			LiteratureList
		},
		data() {
			return {
				articleData: [],
				searchValue: null,
				currentIndex: 0,
				literatureData: []
			};
		},
		// 下拉动作
		onPullDownRefresh() {
			this.getData('isPull');
		},
		// 显示
		onShow() {
			this.meta = {
				...this.meta,
				page: 1,
			};
			this.searchValue = null
			// 文献rq
			this.getData();
		},
		methods: {
			// 详情点击
			detailClick(id) {
				uniNavigateTo(`/pages/article/articleDetail?id=${id}`);
			},
			// 搜索
			search() {
				this.getData('')
			},
			// 获取文献,传all代表全部请求，isPull代表下拉刷新，其他只请求文献
			getData(type = 'all') {
				// 保存指向
				const _this = this;
				uni.showLoading({
					title: "加载中",
					mask: true,
					async success() {
						// 请求文献
						const r = await recommendLiterature(_this.searchValue);
						// 文献数据
						_this.literatureData = r.data;
						// 判断类型
						if (type === 'all' || type === 'isPull') {
							// 请求文章
							const articleData = await recommendArticle();
							_this.articleData = articleData.data;
						}
						// 关闭加载弹窗
						uni.hideLoading();
						if (type === 'isPull') {
							// 停止下拉刷新
							uni.stopPullDownRefresh();
							uni.showToast({
								title: "刷新成功",
							})
						}
					}
				});

			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		background: #eee;
		min-height: 100vh;

		/deep/ .uni-searchbar {
			padding: 0;

			.uni-searchbar__box {
				background-color: #fff !important;
			}
		}

		.swiper_box {
			position: relative;
			height: 260rpx;

			swiper {
				height: 100%;
			}

			.swiper-inner {
				width: 100%;
				height: 100%;
				position: relative;
				font-size: 24rpx;

				>image {
					width: 100%;
					height: 220rpx;
				}

				>view {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					text-align: center;
					color: #fff;
					background: rgba(0, 0, 0, .3);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					box-sizing: border-box;
					padding: 6rpx 20rpx;
				}
			}

			.swiper-indicate {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				>view {
					width: 6rpx;
					height: 6rpx;
					background: #fff;
					margin: 0 2rpx;
					border-radius: 6rpx;
				}

				>.active {
					width: 20rpx;
					background: #1677ff;
				}
			}
		}

		.literature_inner {
			width: 100%;
			margin-top: 50rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			>view:first-of-type {
				padding-left: 20rpx;
				font-size: 30rpx;
				font-weight: 900;
				line-height: 30rpx;
				border-left: 10rpx solid #1677ff;
			}
		}
	}
</style>
